<style lang="less">
    .sider-menu .ivu-menu {
        background: #2e3e4e;
        color: #adbece;
    }

    .sider-menu .ivu-menu .ivu-menu-submenu-title {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sider-menu .ivu-menu .ivu-menu-submenu-title:hover {
        background: #2e3e4e;
    }

    .sider-menu .ivu-menu .ivu-menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sider-menu .ivu-menu .ivu-menu-item.ivu-menu-item-selected {
        color: #65bd77;
        border-right: 3px solid #65bd77;
    }

    .sider-menu .ivu-menu .ivu-menu-item:hover, .sider-menu .ivu-menu-item.ivu-menu-item-active {
        background: #344759 !important;
    }

    .sider-menu .ivu-menu .ivu-menu-item:hover {
        color: #eee;
    }

    .sider-menu .ivu-menu:after {
        background: none;
    }

    .sider-menu .ivu-menu .ivu-menu-submenu .ivu-menu {
        background: #374b5e;
    }

    .sider-menu .ivu-menu .ivu-menu-submenu.ivu-menu-child-item-active > .ivu-menu-submenu-title {
        color: #ffffff;
        font-weight: bold;
    }

    .sider-menu .ivu-menu-vertical .ivu-menu-item, .sider-menu .ivu-menu-vertical .ivu-menu-submenu-title {
        padding: 0;
    }

    .sider-menu .ivu-menu-submenu-title, .sider-menu .ivu-menu-item {
        height: 44px;
        line-height: 44px;
    }

    .sider-menu .ivu-menu-submenu-title > i, .sider-menu .ivu-menu-item > i {
        height: 44px;
        width: 42px;
        line-height: 44px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sider-menu .ivu-menu-item > i:first-child {
        text-indent: 20px;
    }

    .sider-menu .ivu-menu-submenu-title > i:last-child {
        right: 0;
        border-right: none;
    }

    .sider-menu .ivu-menu-submenu-title .icon-bg {
        position: absolute;
        height: 42px;
        width: 42px;
        left: -41px;
        top: 1px;
        z-index: -1;
    }

    .sider-menu .ivu-menu-child-item-active .icon-bg {
        /*left: 0;*/
        transform: translateX(41px);
    }

    .sider-menu .ivu-menu-submenu-title:hover {
        color: #fff;

    .icon-bg {
        transform: translateX(41px);
    }

    }
    .sider-menu .icon-bg-color1 {
        background: #ffc333;
    }

    .sider-menu .icon-bg-color2 {
        background: #fb6b5b;
    }

    .sider-menu .icon-bg-color3 {
        background: #8ec165;
    }

    .sider-menu .icon-bg-color4 {
        background: #4cc0c1;
    }

    .sider-menu .icon-bg-color5 {
        background: #65bd77;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu)::after {
        display: none;
    }

</style>
<template>
    <vue-scroll v-if="menuData" :ops="scrollOps">
        <Menu ref="leftMenu" class="menu" theme="light" :open-names="currentCategory" :active-name="currentItem"
              style="width: auto; height: 100%" @on-select="changeMenu" accordion>
            <Submenu v-for="(m1, index) in menuData" :name="m1.id" :key="m1.id">
                <template slot="title">
                    <div class="icon-bg anim" :class="'icon-bg-color' + (index+1)"></div>
                    <Icon :type="m1.icon"></Icon>
                    {{m1.name}}
                </template>
                <MenuItem v-for="m2 in m1.children" :name="m2.routeName" :key="m2.id" style="padding:0">
                    <Icon type="ios-arrow-forward"></Icon>
                    <span>{{m2.name}}</span>
                </MenuItem>
            </Submenu>
        </Menu>
    </vue-scroll>
</template>

<script>
    export default {
        name: "SideMenu",
        props: {
            // menuData: Array,
            // openNames: Array
        },
        data() {
            return {
                scrollOps: {
                    vuescroll: {
                        // mode: 'slide'
                    },
                    scrollPanel: {
                        scrollingY: true,
                        scrollingX: false
                    },
                    rail: {
                        pos: "right",
                        keepShow: false,
                        opacity: 0.5 //'0.5'
                    },
                    bar: {
                        keepShow: false,
                        opacity: 0.5,
                        hover: false
                    }
                }
            };
        },
        computed: {
            menuData() {
                return this.$store.state.userMenu;
            },
            currentCategory() {
                return this.$store.state.currentCategory;
            },
            currentItem() {
                return this.$store.state.currentNavTab;
            }
        },
        methods: {
            changeMenu(menuName) {
                this.$router.push({
                    name: menuName
                });
            },
            updateOpened() {
                this.$nextTick(() => {
                    this.$refs.leftMenu.updateOpened();
                    this.$refs.leftMenu.updateActiveName();
                });
            }

        }
    }
</script>
